import React from 'react';
import { Modal, Descriptions, Tag, Badge, Progress } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, PauseOutlined } from '@ant-design/icons';

interface ElevatorData {
  id: string;
  name: string;
  location: string;
  status: 'running' | 'idle' | 'maintenance' | 'fault';
  direction: 'up' | 'down' | 'idle';
  currentFloor: number;
  targetFloor?: number;
  load: number;
  maxLoad: number;
  minFloor: number;
  maxFloor: number;
  emergencyStop: boolean;
  maintenanceMode: boolean;
  lastUpdate: string;
}

interface ElevatorDetailModalProps {
  visible: boolean;
  onClose: () => void;
  elevator: ElevatorData;
}

const ElevatorDetailModal: React.FC<ElevatorDetailModalProps> = ({ visible, onClose, elevator }) => {
  const statusMap: Record<ElevatorData['status'], { color: string; text: string }> = {
    running: { color: 'green', text: '运行中' },
    idle: { color: 'blue', text: '空闲' },
    fault: { color: 'red', text: '故障' },
    maintenance: { color: 'orange', text: '维护中' },
  };

  const directionIcon = () => {
    switch (elevator.direction) {
      case 'up':
        return <span style={{ color: '#52c41a' }}><ArrowUpOutlined /> 上行</span>;
      case 'down':
        return <span style={{ color: '#1890ff' }}><ArrowDownOutlined /> 下行</span>;
      default:
        return <span style={{ color: '#666' }}><PauseOutlined /> 停止</span>;
    }
  };

  const loadPercentage = Math.round((elevator.load / elevator.maxLoad) * 100);
  const loadColor = loadPercentage >= 90 ? '#ff4d4f' : loadPercentage >= 70 ? '#faad14' : '#52c41a';

  return (
    <Modal
      title={`电梯详情 - ${elevator.name}（${elevator.id}）`}
      open={visible}
      onCancel={onClose}
      onOk={onClose}
      okText="关闭"
      cancelButtonProps={{ style: { display: 'none' } }}
      width={720}
    >
      <Descriptions bordered column={2} size="small">
        <Descriptions.Item label="位置">{elevator.location}</Descriptions.Item>
        <Descriptions.Item label="状态">
          <Tag color={statusMap[elevator.status].color}>{statusMap[elevator.status].text}</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="当前楼层">{elevator.currentFloor}F</Descriptions.Item>
        <Descriptions.Item label="目标楼层">{elevator.targetFloor ?? '—'}</Descriptions.Item>
        <Descriptions.Item label="运行方向">{directionIcon()}</Descriptions.Item>
        <Descriptions.Item label="楼层范围">{elevator.minFloor}F — {elevator.maxFloor}F</Descriptions.Item>
        <Descriptions.Item label="负载">
          <div>
            <div style={{ marginBottom: 4 }}>{elevator.load}kg / {elevator.maxLoad}kg</div>
            <Progress percent={loadPercentage} size="small" strokeColor={loadColor} />
          </div>
        </Descriptions.Item>
        <Descriptions.Item label="紧急停止">
          <Badge status={elevator.emergencyStop ? 'error' : 'success'} text={elevator.emergencyStop ? '已触发' : '正常'} />
        </Descriptions.Item>
        <Descriptions.Item label="维护模式">
          <Badge status={elevator.maintenanceMode ? 'warning' : 'success'} text={elevator.maintenanceMode ? '开启' : '关闭'} />
        </Descriptions.Item>
        <Descriptions.Item label="最后更新">{elevator.lastUpdate}</Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default ElevatorDetailModal;